<template>
    <div id="mApp">
        <div id="nav">
            <a @click="navShow==='areaSelect'?navShow='':navShow='areaSelect'" :class="navShow==='areaSelect'? 'TabsActive':''">{{areaSelected}}<span class="mui-icon mui-icon-arrowdown"></span></a>
            <span v-if="navTitle!=='我要租房'">{{navTitle}}</span>
            <div class="mui-input-row mui-search" v-if="navTitle==='我要租房'">
                <input type="search" class="mui-input-clear" placeholder="搜索优质房源">
            </div>

            <a class="mui-icon mui-icon-bars" @click="navShow==='router'?navShow='':navShow='router'" :class="navShow==='router'? 'TabsActive':''"></a>
            <div id="navShow" class="navShow" @click="navShow=''" v-if="navShow === 'router'">
                <router-link class="navWord"  to="/mLogin" v-if="loginShow">立即登录<span class="mui-icon mui-icon-arrowright"></span></router-link>
                <router-link class="navWord"  to="/mPersonalCenter" v-if="!loginShow">个人中心<span class="mui-icon mui-icon-arrowright"></span></router-link>
                <router-link class="navWord" to="/mRent">我要租房<span class="mui-icon mui-icon-arrowright"></span></router-link>
                <router-link class="navWord" to="/mFriends">合租伙伴<span class="mui-icon mui-icon-arrowright"></span></router-link>
                <router-link class="navWord" to="/mOwner">业主委托<span class="mui-icon mui-icon-arrowright"></span></router-link>
                <router-link class="navWord" to="/mAppDownload">APP下载<span class="mui-icon mui-icon-arrowright"></span></router-link>
            </div>
            <div id="areaSelect" class="navShow" v-if="navShow === 'areaSelect'" @click="navShow=''">
                <a v-for="item in areaList" @click="areaSelected=item.slice(0,2)">{{item}}<span class="mui-icon mui-icon-arrowright"></span></a>
            </div>
        </div>
        <div id="container">
           <router-view :nowArea="areaSelected"  @loginState="loginSuccess" />
        </div>
    </div>
</template>

<script>
    export default {
        name: "mobileApp",
        data(){
            return {
                loginShow:true,
                navShow:'',
                navTitle:'我要租房',
                areaList:["不限","天河区","越秀区","海珠区","番禺区","花都区","白云区","黄埔区","萝岗区"],
                areaSelected:'不限'
            }
        },
        methods:{
            navTitleChange(){
                switch (this.$route.path) {
                    case '/mLogin': this.navTitle='登录';break;
                    case '/mRent': this.navTitle='我要租房';break;
                    case '/mFriends': this.navTitle='合租伙伴';break;
                    case '/mOwner': this.navTitle='业主委托';break;
                    case '/mAppDownload': this.navTitle='APP下载';break;
                    case '/mPersonalCenter': this.navTitle='个人中心';break;
                }
            },
            loginSuccess(){
                if(document.cookie.indexOf('login_state=true')!== -1)
                {
                    this.loginShow=false;
                    this.$router.push('/mRent');
                }
            }
        },
        watch: {
            '$route': 'navTitleChange'
        },
        created(){
            this.loginSuccess();
        }
    }
</script>

<style scoped>
    #mApp{
        font-size: 0.9rem;
        color: #595959;
    }
    #mApp a{
        color: #595959;
    }
    #nav{
        position:  fixed;
        z-index: 2;
        width: 100vw;
        height: 3rem;
        background-color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #nav a{
        width: 15%;
        font-size: 0.9em;
        font-weight: bold;
        text-align: center;
    }
    #nav>span{
        font-size: 1.3em;
    }
    #nav a span{
        font-size: 0.9em;
    }
    #nav div:nth-child(2){
        width: 70%;
        margin-top: 1rem;
    }
    #nav .mui-input-clear{
        border-radius: 1rem;
        background-color: #fbfbfb;
    }
    #nav .TabsActive{
        color: #ff0a60;
    }
    #nav .navShow{
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 2.5rem;
        right: 0;
        background-color: rgba(0,0,0,0.2);
    }
    #nav .navShow a {
        display: block;
        width: 100vw;
        background-color: white;
        border-bottom: 1px solid #cfcfcf;
        font-weight: normal;
        line-height: 3rem;
        text-align: left;
        text-indent: 2em;
    }
    #nav .navShow span{
        float: right;
        margin-right: 0.5rem;
        line-height: 3rem;
        font-size: 1.5em !important;
        color: #d2d2d2;
    }
    #container{
        position: absolute;
        z-index: -1;
        top: 3rem;
        width: 100vw;
        height: calc(100% - 3rem);
        background-color: whitesmoke;
        overflow-y: auto;
    }

</style>